<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pomodoro Timer</title>
    <style>
        body {
            background-color: #1a1a1a;
            color: #fff;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .container {
            text-align: center;
        }

        .timer-display {
            font-size: 120px;
            font-weight: 300;
            margin-bottom: 40px;
        }

        .controls button {
            background-color: #333;
            color: #fff;
            border: none;
            padding: 15px 30px;
            margin: 0 10px;
            font-size: 18px;
            cursor: pointer;
            border-radius: 25px;
            transition: background-color 0.3s;
        }

        .controls button:hover {
            background-color: #555;
        }

        .controls button.hidden {
            display: none;
        }

        .modes {
            margin-bottom: 20px;
        }

        .modes button {
            background-color: transparent;
            color: #888;
            border: 1px solid #333;
            padding: 10px 20px;
            margin: 0 5px;
            font-size: 16px;
            cursor: pointer;
            border-radius: 20px;
            transition: all 0.3s;
        }

        .modes button.active {
            background-color: #fff;
            color: #000;
            border-color: #fff;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="modes">
            <button id="pomodoro-btn" class="active">Pomodoro</button>
            <button id="short-break-btn">Short Break</button>
            <button id="long-break-btn">Long Break</button>
        </div>
        <div class="timer-display">25:00</div>
        <div class="controls">
            <button id="start-btn">Start</button>
            <button id="pause-btn" class="hidden">Pause</button>
            <button id="reset-btn">Reset</button>
        </div>
    </div>
    <script>
        const timerDisplay = document.querySelector('.timer-display');
        const startBtn = document.getElementById('start-btn');
        const pauseBtn = document.getElementById('pause-btn');
        const resetBtn = document.getElementById('reset-btn');
        const pomodoroBtn = document.getElementById('pomodoro-btn');
        const shortBreakBtn = document.getElementById('short-break-btn');
        const longBreakBtn = document.getElementById('long-break-btn');

        let countdown;
        let timeLeft;
        let currentMode = 'pomodoro';

        const modes = {
            pomodoro: 25 * 60,
            shortBreak: 5 * 60,
            longBreak: 15 * 60,
        };

        function setMode(mode) {
            currentMode = mode;
            timeLeft = modes[mode];
            document.body.style.backgroundColor = mode === 'pomodoro' ? '#1a1a1a' : '#2a2a2a';

            document.querySelectorAll('.modes button').forEach(button => {
                button.classList.remove('active');
            });
            document.getElementById(`${mode.replace('B', '-b')}-btn`).classList.add('active');

            resetTimer();
        }

        pomodoroBtn.addEventListener('click', () => setMode('pomodoro'));
        shortBreakBtn.addEventListener('click', () => setMode('shortBreak'));
        longBreakBtn.addEventListener('click', () => setMode('longBreak'));


        function displayTimeLeft(seconds) {
            const minutes = Math.floor(seconds / 60);
            const remainderSeconds = seconds % 60;
            const display = `${minutes}:${remainderSeconds < 10 ? '0' : ''}${remainderSeconds}`;
            timerDisplay.textContent = display;
            document.title = display;
        }

        function startTimer() {
            startBtn.classList.add('hidden');
            pauseBtn.classList.remove('hidden');
            clearInterval(countdown);
            const now = Date.now();
            const then = now + timeLeft * 1000;
            displayTimeLeft(timeLeft);

            countdown = setInterval(() => {
                const secondsLeft = Math.round((then - Date.now()) / 1000);
                if (secondsLeft < 0) {
                    clearInterval(countdown);
                    alert('Time is up!');
                    resetTimer();
                    return;
                }
                timeLeft = secondsLeft;
                displayTimeLeft(timeLeft);
            }, 1000);
        }

        function pauseTimer() {
            pauseBtn.classList.add('hidden');
            startBtn.classList.remove('hidden');
            clearInterval(countdown);
        }

        function resetTimer() {
            pauseBtn.classList.add('hidden');
            startBtn.classList.remove('hidden');
            clearInterval(countdown);
            timeLeft = modes[currentMode];
            displayTimeLeft(timeLeft);
        }

        startBtn.addEventListener('click', startTimer);
        pauseBtn.addEventListener('click', pauseTimer);
        resetBtn.addEventListener('click', resetTimer);

        setMode('pomodoro');
    </script>
</body>
</html> 